{%- comment -%} 用于调试（需要把ts里面的引入包注释） {%- endcomment -%}
{% comment %} <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/2.0.1/TweenMax.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/ScrollMagic.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/animation.gsap.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ScrollMagic/2.0.7/plugins/debug.addIndicators.min.js"></script> {% endcomment %}
<meta name="apple-mobile-web-app-capable" content="yes">
{% comment %} <div id="trigger1"></div> {% endcomment %}
<style>
  body {
    max-width: 100%;
  }
</style>
{%liquid
  assign img_url = 'track-machine-1.png' | file_img_url
  assign img_url_arr = img_url | split: 'track-machine'
  assign file_url = img_url_arr[0]
%}
<link rel="stylesheet" href="{{ 'rokid-max-page-index.min.css' | asset_url }}">
{% comment %} <div class="as-controller" style=" height: 667px; width: 100%; position: fixed; top: 0; z-index: -11;"></div> {% endcomment %}
<div class="as-banner2-desktop-text-content-trigger position-absolute" style="top: 20vw;"></div>
<div class="as-banner2-desktop-video-trigger position-absolute" style="top: 35vw;"></div>
<div class="as-banner3-desktop-text-content-trigger position-absolute" style="top: 120vw;"></div>
<div class="as-banner4-desktop-trigger position-absolute" style="top:325vw"></div>
<div class="as-banner4-desktop-image-trigger position-absolute" style="top:625vw"></div>
<div class="as-banner5-desktop-text-content-trigger position-absolute" style="top: 740vw;"></div>
<div class="as-banner5-desktop-image-trigger position-absolute" style="top: 750vw;"></div>
<div class="as-banner6-desktop-text-content-trigger position-absolute" style="top: 960vw;"></div>
<div class="as-banner7-desktop-text-content-trigger position-absolute" style="top: 1021vw;"></div>
<div class="as-banner8-desktop-text-content-trigger position-absolute" style="top: 1147vw;"></div>
<div class="as-banner8-desktop-video-trigger position-absolute" style="top: 1147vw;"></div>
<div class="as-banner9-desktop-text-content-trigger position-absolute" style="top: 1257vw;"></div>
<div class="as-banner10-desktop-text-content-trigger position-absolute" style="top: 1387vw;"></div>
<div class="as-banner11-desktop-text-content-trigger position-absolute" style="top: 1640vw;"></div>
<div class="as-banner12-desktop-text-content-trigger position-absolute" style="top: 1730vw;"></div>
<div class="as-banner12-desktop-svg-trigger position-absolute" style="top: 1780vw;"></div>
{% comment %} <div class="as-banner13-desktop-text-content-trigger position-absolute" style="top: 1855vw;"></div> {% endcomment %}
<div class="as-banner13-desktop-text-content-trigger position-absolute" style="top: 1844vw;"></div>

                      
<div class="as-rokid-max-page rokid-max-page" data-img-src="{{ file_url }}">
  <div class="as-rokid-max-wrap rokid-max-wrap">
    <div class="as-rokid-max-content rokid-max-content d-lg-flex">
      <div class="as-rokid-max-banner1-wrap rokid-max-banner1-wrap flex-shrink-0">
        <div class="as-rokid-max-banner1 rokid-max-banner1 position-relative overflow-hidden">
          <div class="as-banner1-desktop-text-image banner1-text-image ratio d-none d-lg-block" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner1_desktop_text_image.aspect_ratio | times: 100 }}%;">
            <picture>
              <img
                class="w-100 object-fit-cover"
                src="{{ section.settings.banner1_desktop_text_image | img_url: 'master' }}"
                alt="{{ section.settings.banner1_desktop_text_image.alt | escape }}"
                loading="lazy"
              >
            </picture>
          </div>
          <div class="as-banner1-mobile-text-image banner1-text-image ratio d-lg-none" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner1_mobile_text_image.aspect_ratio | times: 100 }}%;">
            <picture>
              <img
                class="w-100 object-fit-cover"
                src="{{ section.settings.banner1_mobile_text_image | img_url: 'master' }}"
                alt="{{ section.settings.banner1_mobile_text_image.alt | escape }}"
                loading="lazy"
              >
            </picture>
          </div>
          <div class="d-lg-block d-none as-banner1-product-desktop-image banner1-product-desktop-image">
            <div class="ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner1_product_desktop_image.aspect_ratio | times: 100 }}%;">
              <picture>
                <img
                  class="w-100 object-fit-cover"
                  src="{{ section.settings.banner1_product_desktop_image | img_url: 'master' }}"
                  alt="{{ section.settings.banner1_product_desktop_image.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>
          </div>
          <div class="d-lg-none d-block as-banner1-product-mobile-image banner1-product-mobile-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner1_product_mobile_image.aspect_ratio | times: 100 }}%;">
            <picture>
              <img
                class="w-100 object-fit-cover h-100"
                src="{{ section.settings.banner1_product_mobile_image | img_url: 'master' }}"
                alt="{{ section.settings.banner1_product_mobile_image.alt | escape }}"
                loading="lazy"
              >
            </picture>
          </div>
        </div>
      </div>

      <div class="as-rokid-max-banner2-wrap rokid-max-banner2-wrap flex-shrink-0">
        <div class="rokid-max-banner2 position-relative">
          <div class="as-banner2-text-content banner2-text-content">
            <div class="as-banner2-mobile-text-content-trigger ms-lg-9"></div>
            <div class="position-relative">
              <h2 class="mx-lg-9 as-banner2-title banner2-title no-all-margin mb-0 text-gradient">{{ section.settings.banner2_title }}</h2>
              <h2 class="mx-lg-9 as-banner2-hidden-title banner2-title banner2-hidden-title no-all-margin mb-0 text-gradient">{{ section.settings.banner2_title }}</h2>
            </div>
            <div class="as-banner2-text banner2-text no-all-margin mt-4 mt-md-5 mt-xxl-6">{{ section.settings.banner2_text }}</div>
            <div class="as-banner2-icon-wrap icon-wrap mt-4 mt-md-5 mt-xxl-6">
              <div class="d-flex flex-nowrap ">
                <div class="cursor-pointer">
                  <span class="as-play-btn" data-bs-toggle="modal" data-bs-target="#video-modal">{%- render 'icon-play-btn' -%}</span>
                  <span class="d-none as-pause-btn">{%- render 'icon-pause-circle' -%}</span>
                </div>
                <div class="align-self-center ms-2 no-last-margin">{{ section.settings.banner2_text2 }}</div>
              </div>
            </div>
          </div>
          <div class="d-lg-block d-none as-banner2-product-desktop-image-wrap banner2-product-desktop-image-wrap">
            <div class="position-relative">
              <div class="as-banner2-product-desktop-image banner2-product-desktop-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner2_product_desktop_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner2_product_desktop_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner2_product_desktop_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>
              <div class="as-banner2-desktop-shadow-image2 banner2-shadow-image2 position-absolute start-0">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner2_shadow_image2 | img_url: 'master' }}"
                    alt="{{ section.settings.banner2_shadow_image2.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>
            </div>
          </div>
          <div class="as-banner2-product-video-wrap banner2-product-video-wrap">
            <div class="as-banner2-mobile-video-trigger"></div>
            <video class="as-banner2-product-video w-100 d-none d-lg-block" type="mp4" muted loop autoplay playsinline webkit-playsinline src="{{ section.settings.banner2_product_desktop_video }}"></video>
            <video class="as-banner2-product-video w-100 d-lg-none mt-n4" type="mp4" muted loop autoplay playsinline webkit-playsinline src="{{ section.settings.banner2_product_mobile_video }}"></video>
          </div>
        </div>
      </div>

      <div class="as-rokid-max-banner3-wrap rokid-max-banner3-wrap flex-shrink-0">
        <div class="rokid-max-banner3">
          <div class="as-banner3-text-content banner3-text-content">
            <div class="as-banner3-mobile-text-content-trigger ms-lg-9"></div>
            <div class="position-relative">
              <h2 class="mx-lg-9 as-banner3-title banner3-title no-all-margin mb-0">{{ section.settings.banner3_title }}</h2>
              <h2 class="mx-lg-9 as-banner3-hidden-title banner3-hidden-title banner3-title no-all-margin mb-0">{{ section.settings.banner3_title }}</h2>
            </div>
            <div class="as-banner3-text banner3-text no-all-margin mt-4">
              {{ section.settings.banner3_text }}
              <div class="as-banner3-icon-wrap banner3-icon-wrap pt-6">
              <div class="icon-image gray-600">
                {% render 'icon-game1' %}
              </div>
            </div>
            </div>
            
          </div>
          <div class="d-lg-block d-none as-banner3-product-desktop-image-wrap banner3-product-desktop-image-wrap">
            <div class="position-relative">
              <div class="eyeglasses-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner3_desktop_eyeglasses_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner3_desktop_eyeglasses_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner3_desktop_eyeglasses_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>
              <div class="as-banner3-product-desktop-image banner3-product-desktop-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner3_product_desktop_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner3_product_desktop_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner3_product_desktop_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>
              
              <div class="as-virtual-image-a virtual-image-a ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner3_desktop_virtual_image_a.aspect_ratio | times: 100 }}%;"> 
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner3_desktop_virtual_image_a | img_url: 'master' }}"
                    alt="{{ section.settings.banner3_desktop_virtual_image_a.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>

              <div class="as-virtual-image-b virtual-image-b ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner3_desktop_virtual_image_b.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner3_desktop_virtual_image_b | img_url: 'master' }}"
                    alt="{{ section.settings.banner3_desktop_virtual_image_b.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>

              <div class="as-start-image start-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner3_desktop_star.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner3_desktop_star | img_url: 'master' }}"
                    alt="{{ section.settings.banner3_desktop_star.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>

              <div class="as-footer-shadow-image footer-shadow-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner3_desktop_footer_shadow.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner3_desktop_footer_shadow | img_url: 'master' }}"
                    alt="{{ section.settings.banner3_desktop_footer_shadow.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>
            </div>
          </div>

          <div class="d-lg-none d-block as-banner3-product-mobile-image-wrap banner3-product-mobile-image-wrap">
            <div class="eyeglasses-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner3_mobile_eyeglasses_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner3_mobile_eyeglasses_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner3_mobile_eyeglasses_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>

            <div class="as-banner3-product-mobile-image banner3-product-mobile-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner3_product_mobile_image.aspect_ratio | times: 100 }}%;">
              <picture>
                <img
                  class="w-100 object-fit-cover h-100"
                  src="{{ section.settings.banner3_product_mobile_image | img_url: 'master' }}"
                  alt="{{ section.settings.banner3_product_mobile_image.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>

              <div class="as-mobile-virtual-image-a virtual-image-a ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner3_mobile_virtual_image_a.aspect_ratio | times: 100 }}%;"> 
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner3_mobile_virtual_image_a | img_url: 'master' }}"
                    alt="{{ section.settings.banner3_mobile_virtual_image_a.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>

              <div class="as-mobile-virtual-image-b virtual-image-b ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner3_mobile_virtual_image_b.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner3_mobile_virtual_image_b | img_url: 'master' }}"
                    alt="{{ section.settings.banner3_mobile_virtual_image_b.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>

              <div class="as-mobile-start-image start-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner3_mobile_star.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner3_mobile_star | img_url: 'master' }}"
                    alt="{{ section.settings.banner3_mobile_star.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>

              <div class="as-mobile-footer-shadow-image footer-shadow-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner3_mobile_footer_shadow.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner3_mobile_footer_shadow | img_url: 'master' }}"
                    alt="{{ section.settings.banner3_mobile_footer_shadow.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>
          </div>
        </div>
      </div>

      <div class="as-rokid-max-banner4-wrap rokid-max-banner4-wrap flex-shrink-0 bg-white">
        <div class="as-rokid-max-banner4 rokid-max-banner4 position-relative">
          <div class="as-banner4-mobile-trigger"></div>
          <div class="as-banner4-mobile-image-trigger"></div>
          <div class="vw-100 vh-100 as-banner4-product-image-wrap banner4-product-image-wrap position-sticky start-0 top-0">
            <div class="h-100 w-100 position-relative overflow-hidden">
              {% render 'background-color-animation' %}
              <div class="d-none d-lg-block as-banner4-product-desktop-image banner4-product-desktop-image" style="--banner4-bg-mask-layer-opcity: 1;">
                <canvas class="as-desktop-canvas main-img cursor-pointer as-img object-fit-contain cursor-grab" height="1080" width="1920" style="width: 100%; height: 100%; object-fit: cover;"></canvas>
              </div>
              <div class="d-lg-none d-none d-md-block as-banner4-product-pad-image banner4-product-mobile-image">
                <canvas class="as-pad-canvas main-img cursor-pointer as-img object-fit-contain cursor-grab" height="1440" width="1080" style="width: 100%; height: 100%; object-fit: cover;"></canvas>
              </div>
              <div class="d-md-none as-banner4-product-mobile-image banner4-product-mobile-image">
                <canvas class="as-mobile-canvas main-img cursor-pointer as-img object-fit-contain cursor-grab" height="2100" width="1080" style="width: 100%; height: 100%; object-fit: cover;"></canvas>
              </div>
              {% comment %} <div class="d-none d-lg-block as-banner4-product-desktop-image banner4-product-desktop-image" style="--banner4-bg-mask-layer-opcity: 1;">
                <img class="object-fit-cover w-100 h-100" src="{{ images['rokid-screen-pc-v6-1.png'] | img_url: 'master' }}">
              </div> {% endcomment %}

              {% comment %} <div class="d-lg-none d-none d-md-block as-banner4-product-pad-image banner4-product-mobile-image">
                <img class="object-fit-cover w-100 h-100" src="{{ images['rokid-screen-pad-v1-1.png'] | img_url: 'master' }}">
              </div> {% endcomment %}

              {% comment %} <div class="d-md-none as-banner4-product-mobile-image banner4-product-mobile-image">
                <img class="object-fit-cover w-100 h-100" src="{{ images['rokid-screen-mb-v5-1.png'] | img_url: 'master' }}">
              </div> {% endcomment %}
            </div>
          </div>
        </div>
      </div>

      <div class="as-rokid-max-banner5-wrap rokid-max-banner5-wrap flex-shrink-0 position-relative">
        <div class="rokid-max-banner5 position-relative">
          <div class="as-banner5-mobile-text-content-trigger"></div>
          <div class="as-banner5-mobile-image-trigger"></div>
          <div class="vw-100 position-sticky start-0 top-0 banner5-sticky-content">
            <div class="d-lg-none d-block as-banner5-product-mobile-image-wrap banner5-product-mobile-image-wrap position-relative">
              <div class="as-banner5-product-mobile-image banner5-product-mobile-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner5_product_mobile_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner5_product_mobile_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner5_product_mobile_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
                <div class="as-banner5-mobile-image-mask-layer as-banner5-mobile-image-mask-layer banner5-image-mask-layer"></div>
              </div>
              <div class="banner5-progress-bar-wrap">
              <div class="banner5-progress-bar rounded-pill overflow-hidden">
                  <div class="as-banner5-progress-mask-layer banner5-progress-mask-layer"></div>
                  <div class="as-progress-bar-step progress-bar-step"></div>
                  <div class="as-progress-bar-step progress-bar-step"></div>
                  <div class="as-progress-bar-step progress-bar-step"></div>
                  <div class="as-progress-bar-step progress-bar-step"></div>
                  <div class="as-progress-bar-step progress-bar-step"></div>
                  <div class="as-progress-bar-step progress-bar-step border-0"></div>
                </div>
                <span class="icon-luminance">{% render 'icon-luminance' %}</span>
              </div>
            </div>
            <div class="as-banner5-text-content banner5-text-content ms-lg-9">
              <div class="position-relative banner5-title-wrap as-banner5-title-wrap">
                <h2 class="as-banner5-title banner5-title no-all-margin mb-0">{{ section.settings.banner5_title }}</h2>
                <h2 class="as-banner5-hidden-title banner5-hidden-title banner5-title no-all-margin mb-0">{{ section.settings.banner5_title }}</h2>
              </div>
              <div class="as-banner5-text banner5-text no-all-margin mt-4">{{ section.settings.banner5_text }}</div>
              <div class="as-banner5-second-text banner5-second-text mt-6">
                <div class="no-all-margin up-to-text">{{ section.settings.banner5_up_to }}</div>
                <div class="position-relative">
                  <div class="as-nits-text nits-text no-all-margin fw-bolder">{{ section.settings.banner5_nits }}</div>
                  <div class="as-hidden-nits-text hidden-nits-text nits-text no-all-margin fw-bolder">{{ section.settings.banner5_nits }}</div>
                </div>
              </div>
            </div>
            <div class="d-lg-block d-none as-banner5-product-desktop-image-wrap banner5-product-desktop-image-wrap">
              <div class="postion-relative h-100 as-banner5-product-desktop-image banner5-product-desktop-image ratio"  style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner5_product_desktop_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner5_product_desktop_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner5_product_desktop_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
                <div class="as-banner5-desktop-image-mask-layer banner5-image-mask-layer"></div>
              </div>
              <div class="position-relative">
                <div class="banner5-progress-bar rounded-pill postion-relative overflow-hidden">
                  <div class="as-banner5-progress-mask-layer banner5-progress-mask-layer">
                  </div>
                  <div class="as-progress-bar-step progress-bar-step"></div>
                  <div class="as-progress-bar-step progress-bar-step"></div>
                  <div class="as-progress-bar-step progress-bar-step"></div>
                  <div class="as-progress-bar-step progress-bar-step"></div>
                  <div class="as-progress-bar-step progress-bar-step"></div>
                  <div class="as-progress-bar-step progress-bar-step border-0"></div>
                </div>
                <span class="icon-luminance">{% render 'icon-luminance' %}</span>
              </div>
            </div>
            
          </div>
        </div>
      </div>

      <div class="as-rokid-max-banner6-wrap rokid-max-banner6-wrap flex-shrink-0">
        <div class="rokid-max-banner6 position-relative">
          <div class="as-banner6-text-content banner6-text-content">
            <div class="as-banner6-mobile-text-content-trigger"></div>
            <div class="position-relative">
              <h2 class="as-banner6-title banner6-title no-all-margin mb-0">{{ section.settings.banner6_title }}</h2>
              <h2 class="as-banner6-hidden-title banner6-hidden-title banner6-title no-all-margin mb-0">{{ section.settings.banner6_title }}</h2>
            </div>
            <div class="as-banner6-text banner6-text no-all-margin mt-4">{{ section.settings.banner6_text }}</div>
          </div>
          <div class="d-lg-block d-none as-banner6-product-desktop-image banner6-product-desktop-image">
            <div class="position-relative">
              <div class="ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner6_product_desktop_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner6_product_desktop_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner6_product_desktop_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>
              <div class="waves-image1">
                <img class="w-100 h-100" src="{{ images['waves1.png'] | img_url: 'master' }}">
              </div> 
              <div class="waves-image2">
                <img class="h-100 w-100" src="{{ images['waves2.png'] | img_url: 'master' }}">
              </div>
              <div class="waves-image3">
                <img class="w-100 h-100" src="{{ images['waves3.png'] | img_url: 'master' }}">
              </div>
            </div>
          </div>
          <div class="d-lg-none d-block as-banner6-product-mobile-image banner6-product-mobile-image">
            <div class="position-relative overflow-hidden">
              <div class="ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner6_product_mobile_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner6_product_mobile_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner6_product_mobile_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>
              <div class="waves-image1">
                <img class="w-100 h-100" src="{{ images['waves1.png'] | img_url: 'master' }}">
              </div>
              <div class="waves-image2">
                <img class="h-100 w-100" src="{{ images['waves2.png'] | img_url: 'master' }}">
              </div>
              <div class="waves-image3">
                <img class="w-100 h-100" src="{{ images['waves3.png'] | img_url: 'master' }}">
              </div>
            </div>
          </div>
        </div>
      </div>

      <div class="as-rokid-max-banner7-wrap rokid-max-banner7-wrap flex-shrink-0">
        <div class="rokid-max-banner7 position-relative">
          <div class="position-sticky start-0 top-0 banner7-sticky-content overflow-hidden">
            <div class="as-banner7-text-content banner7-text-content">
              <div class="position-relative">
                <div class="as-banner7-mobile-text-content-trigger"></div>
                <div class="position-relative">
                  <h2 class="mx-lg-9 as-banner7-title banner7-title no-all-margin mb-0">{{ section.settings.banner7_title }}</h2>
                  <h2 class="mx-lg-9 as-banner7-hidden-title banner7-hidden-title banner7-title no-all-margin mb-0">{{ section.settings.banner7_title }}</h2>
                </div>
                <div class="as-banner7-text banner7-text no-all-margin mt-4">{{ section.settings.banner7_text }}</div>
              </div>
            </div>

            <div class="as-banner7-text-75g banner7-text-75g text-center fw-lighter">
              <div class="no-all-margin" style="font-family: system-ui;">{{ section.settings.banner7_75g }}</div>
            </div>

            <div class="d-lg-block d-none as-banner7-product-desktop-image banner7-product-desktop-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner7_product_desktop_image.aspect_ratio | times: 100 }}%;">
              <picture>
                <img
                  class="w-100 object-fit-cover h-100"
                  src="{{ section.settings.banner7_product_desktop_image | img_url: 'master' }}"
                  alt="{{ section.settings.banner7_product_desktop_image.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>

            <div class="d-lg-none d-block as-banner7-product-mobile-image banner7-product-mobile-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner7_product_mobile_image.aspect_ratio | times: 100 }}%;">
              <picture>
                <img
                  class="w-100 object-fit-cover h-100"
                  src="{{ section.settings.banner7_product_mobile_image | img_url: 'master' }}"
                  alt="{{ section.settings.banner7_product_mobile_image.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>

            <div class="d-lg-block d-none as-banner7-desktop-background-image banner7-desktop-background-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner7_desktop_background_image.aspect_ratio | times: 100 }}%;">
              <picture>
                <img
                  class="w-100 object-fit-cover h-100"
                  src="{{ section.settings.banner7_desktop_background_image | img_url: 'master' }}"
                  alt="{{ section.settings.banner7_desktop_background_image.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>

            <div class="d-lg-none d-block as-banner7-mobile-background-image banner7-mobile-background-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner7_mobile_background_image.aspect_ratio | times: 100 }}%;">
              <picture>
                <img
                  class="w-100 object-fit-cover h-100"
                  src="{{ section.settings.banner7_mobile_background_image | img_url: 'master' }}"
                  alt="{{ section.settings.banner7_mobile_background_image.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>
          </div>
        </div>
      </div>

      <div class="as-rokid-max-banner8-wrap rokid-max-banner8-wrap flex-shrink-0 bg-white">
        <div class="rokid-max-banner8 position-relative">
          <div class="as-banner8-text-content banner8-text-content">
            <div class="as-banner8-mobile-text-content-trigger"></div>
            <div class="banner8-title-wrap">
              <h2 class="px-lg-9 as-banner8-title banner8-title no-all-margin mb-0">{{ section.settings.banner8_title }}</h2>
              <h2 class="px-lg-9 as-banner8-hidden-title banner8-hidden-title  banner8-title no-all-margin mb-0">{{ section.settings.banner8_title }}</h2>
            </div>
            <div class="banner8-text-wrap">
              <div class="as-banner8-text banner8-text no-all-margin mt-4 mt-lg-2 mt-xxl-4">{{ section.settings.banner8_text }}</div>
            </div>
          </div>
          <div class="as-banner8-mobile-video-trigger position-absolute"></div>
          <div class="as-banner8-mobile-video-trigger"></div>
          <div class="as-banner8-product-desktop-video-wrap banner8-product-desktop-video-wrap d-none d-lg-block">
            <video class="as-banner8-product-desktop-video w-100 h-100 object-fit-cover" type="mp4" muted playsinline webkit-playsinline src="{{ section.settings.banner8_product_desktop_video }}"></video>
          </div>
          <div class="as-banner8-product-mobile-video-wrap banner8-product-mobile-video-wrap d-lg-none">
            <video class="as-banner8-product-mobile-video w-100 h-100 object-fit-cover" type="mp4" muted playsinline webkit-playsinline src="{{ section.settings.banner8_product_mobile_video }}?t=0.2"></video>
          </div>
        </div>
      </div>
      
      <div class="as-rokid-max-banner9-wrap rokid-max-banner9-wrap flex-shrink-0 bg-white" style="--banner9-mask-layer-opcity:0">
        <div class="as-rokid-max-banner9 rokid-max-banner9 position-relative">
          <div class="as-banner9-text-content banner9-text-content">
            <div class="as-banner9-mobile-text-content-trigger ms-lg-9"></div>
            <div class="position-relative">
              <h2 class="mx-lg-9 as-banner9-title banner9-title no-all-margin mb-0">{{ section.settings.banner9_title }}</h2>
              <h2 class="mx-lg-9 as-banner9-hidden-title banner9-hidden-title banner9-title no-all-margin mb-0">{{ section.settings.banner9_title }}</h2>
            </div>
            <div class="as-banner9-text banner9-text no-all-margin mt-4">{{ section.settings.banner9_text }}</div>
            <div class="as-banner9-icon-wrap banner9-icon-wrap mt-6">
              <div class="icon-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner9_icon_image.aspect_ratio | times: 100 }}%;">
              <picture>
                <img
                  class="w-100 object-fit-cover h-100"
                  src="{{ section.settings.banner9_icon_image | img_url: 'master' }}"
                  alt="{{ section.settings.banner9_icon_image.alt | escape }}"
                  loading="lazy">
              </picture>
          </div>
            </div>
          </div>
          <div class="d-lg-block d-none as-banner9-product-desktop-image banner9-product-desktop-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner9_product_desktop_image.aspect_ratio | times: 100 }}%;">
            <picture>
              <img
                class="w-100 object-fit-cover h-100"
                src="{{ section.settings.banner9_product_desktop_image | img_url: 'master' }}"
                alt="{{ section.settings.banner9_product_desktop_image.alt | escape }}"
                loading="lazy">
            </picture>
          </div>
          <div class="d-lg-none d-block as-banner9-product-mobile-image banner9-product-mobile-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner9_product_mobile_image.aspect_ratio | times: 100 }}%;">
            <picture>
              <img
                class="w-100 object-fit-cover h-100"
                src="{{ section.settings.banner9_product_mobile_image | img_url: 'master' }}"
                alt="{{ section.settings.banner9_product_mobile_image.alt | escape }}"
                loading="lazy"
              >
            </picture>
          </div>
        </div>
      </div>

      <div class="as-rokid-max-banner10-wrap rokid-max-banner10-wrap flex-shrink-0">
        <div class="as-rokid-max-banner10 rokid-max-banner10 position-relative">

        <div class="as-banner10-mobile-text-content-trigger"></div>
          <div class="vw-100 position-sticky start-0 banner10-sticky-content">   

            <div class="d-lg-block d-none as-banner10-product-desktop-image-wrap banner10-product-desktop-image-wrap">
              <div class="as-banner10-product-desktop-image banner10-product-desktop-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner10_product_desktop_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner10_product_desktop_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner10_product_desktop_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>

              <div class="as-banner10-desktop-shadow-image banner10-desktop-shadow-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner10_desktop_shadow_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner10_desktop_shadow_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner10_desktop_shadow_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>
              
              <div class="as-banner10-desktop-lenses-image banner10-desktop-lenses-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner10_desktop_lenses_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner10_desktop_lenses_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner10_desktop_lenses_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>
            </div> 

            <div class="banner10-product-mobile-image-wrap d-lg-none d-block">
              <div class="as-banner10-product-mobile-image banner10-product-mobile-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner10_product_mobile_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner10_product_mobile_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner10_product_mobile_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>

              <div class="as-banner10-mobile-lenses-image banner10-mobile-lenses-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner10_mobile_lenses_image.aspect_ratio | times: 100 }}%;">
                <picture>
                  <img
                    class="w-100 object-fit-cover h-100"
                    src="{{ section.settings.banner10_mobile_lenses_image | img_url: 'master' }}"
                    alt="{{ section.settings.banner10_mobile_lenses_image.alt | escape }}"
                    loading="lazy"
                  >
                </picture>
              </div>
            </div>

            <div class="d-lg-none d-block as-banner10-mobile-shadow-image banner10-mobile-shadow-image ratio" style="--se-aspect-ratio: {{ 1 | divided_by: section.settings.banner10_mobile_shadow_image.aspect_ratio | times: 100 }}%;">
              <picture>
                <img
                  class="w-100 object-fit-cover h-100"
                  src="{{ section.settings.banner10_mobile_shadow_image | img_url: 'master' }}"
                  alt="{{ section.settings.banner10_mobile_shadow_image.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>

          </div>

          <div class="as-banner10-text-content banner10-text-content">
            <h2 class="px-lg-9 as-banner10-title banner10-title no-all-margin mb-0">{{ section.settings.banner10_title }}</h2>
            <div class="banner10-text-wrap">
              <div class="as-banner10-text banner10-text no-all-margin mt-4">{{ section.settings.banner10_text }}</div>
              <div class="as-banner10-text2 banner10-text2 no-all-margin mt-5">{{ section.settings.banner10_text2 }}</div>
              <div class="position-relative as-banner10-text3-wrap banner10-text3-wrap">
                <div class="as-banner10-text3 banner10-text3 no-all-margin fw-bolder">{{ section.settings.banner10_text3 }}</div>
                <div class="as-banner10-hidden-text3 banner10-hidden-text3 banner10-text3 no-all-margin fw-bolder">{{ section.settings.banner10_text3 }}</div>
              </div>
            </div>
          </div>

          <div class="banner10-second-text-content">
            <div class="position-relative">
              <h2 class="ps-lg-9 as-banner10-second-title banner10-second-title no-all-margin mb-0">{{ section.settings.banner10_second_title }}</h2>
              <h2 class="ps-lg-9 as-banner10-hidden-second-title banner10-hidden-second-title banner10-second-title no-all-margin mb-0">{{ section.settings.banner10_second_title }}</h2>
            </div>
            <div class="as-banner10-second-text banner10-second-text no-all-margin mt-6">{{ section.settings.banner10_second_text }}</div>
          </div>

          <div class="as-banner10-desktop-background-image banner10-desktop-background-image d-none d-lg-block">
            <picture>
              <img
                class="w-100 object-fit-cover h-100"
                src="{{ section.settings.banner10_desktop_background_image | img_url: 'master' }}"
                alt="{{ section.settings.banner10_desktop_background_image.alt | escape }}"
                loading="lazy"
              >
            </picture>
          </div>
        
          <div class="as-banner10-mobile-background-image banner10-mobile-background-image d-lg-none">
            <picture>
              <img
                class="w-100 object-fit-cover h-100"
                src="{{ section.settings.banner10_mobile_background_image | img_url: 'master' }}"
                alt="{{ section.settings.banner10_mobile_background_image.alt | escape }}"
                loading="lazy"
              >
            </picture>
          </div>

        </div>
      </div>

      <div class="as-rokid-max-banner11-wrap rokid-max-banner11-wrap flex-shrink-0"> 
        <div class="rokid-max-banner11">
          <div class="as-banner11-mobile-text-content-trigger"></div>
          <div class="vh-100 vw-100 icon-bg-eys-wrap">
            {% render 'icon-background-eyes' %}
          </div>
        </div>
        
      </div>
      
      {% comment %} <div class="as-rokid-max-banner12-wrap rokid-max-banner12-wrap flex-shrink-0">
        <div class="rokid-max-banner12 position-relative">
          <div class="as-banner12-mobile-text-content-trigger"></div>
          <div class="as-banner12-mobile-svg-trigger"></div>
          <div class="vw-100 banner12-sticky-content position-sticky start-0 overflow-hidden">
            <div class="as-banner12-text-content banner12-text-content ms-lg-9">
              <div class="position-relative as-banner12-title-wrap banner12-title-wrap">
                <h2 class=" as-banner12-title banner12-title no-all-margin mb-0">{{ section.settings.banner12_title }}</h2>
                <h2 class=" as-banner12-hidden-title banner12-hidden-title banner12-title no-all-margin mb-0">{{ section.settings.banner12_title }}</h2>
              </div>
              <div class="as-banner12-text banner12-text no-all-margin mt-4">{{ section.settings.banner12_text }}</div>
              <div class="as-banner12-text2 banner12-text2 no-all-margin mt-5">{{ section.settings.banner12_text2 }}</div>
              <div class="position-relative as-banner12-text3-wrap banner12-text3-wrap">
                <div class="as-banner12-text3 banner12-text3 no-all-margin fw-bolder">{{ section.settings.banner12_text3 }}</div>
                <div class="as-banner12-hidden-text3 banner12-hidden-text3 banner12-text3 no-all-margin fw-bolder">{{ section.settings.banner12_text3 }}</div>
              </div>
            </div>

            <div class="as-banner12-product-desktop-image banner12-product-desktop-image">
              <picture>
                <img
                  class="w-100 object-fit-cover h-100"
                  src="{{ section.settings.banner12_product_desktop_image | img_url: 'master' }}"
                  alt="{{ section.settings.banner12_product_desktop_image.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>
            <div class="as-banner12-product-desktop-image2 banner12-product-desktop-image2">
              <picture>
                <img
                  class="w-100 object-fit-cover h-100"
                  src="{{ section.settings.banner12_product_desktop_image2 | img_url: 'master' }}"
                  alt="{{ section.settings.banner12_product_desktop_image2.alt | escape }}"
                  loading="lazy"
                >
              </picture>
            </div>
          </div>
        </div>
      </div> {% endcomment %}

      <div class="as-rokid-max-banner12-wrap rokid-max-banner12-wrap flex-shrink-0">
        <div class="rokid-max-banner12 position-relative h-100">
          <div class="as-banner12-mobile-text-content-trigger"></div>
          <div class="as-banner12-mobile-svg-trigger"></div>
          <div class="h-100 banner12-sticky-content position-sticky start-0 overflow-hidden">
            <div class="banner12-text-content d-flex flex-column justify-content-center">
              <div class="position-relative as-banner12-title-wrap banner12-title-wrap col-lg-8 col-xl-10">
                {% if section.settings.banner12_title != blank %}
                  <h2 class="as-banner12-title banner12-title no-all-margin">{{ section.settings.banner12_title }}</h2>
                  <h2 class="as-banner12-hidden-title banner12-hidden-title banner12-title no-all-margin">{{ section.settings.banner12_title }}</h2>
                {% endif %}
              </div>
              {% if section.settings.secondary12_title != blank %}
                <div class="mt-2">
                  <h3 class="secondary-title no-all-margin">{{ section.settings.secondary12_title }}</h3>
                </div>
              {% endif %}
              {% if section.settings.banner12_text != blank %}
                <div class="as-banner12-text banner12-text no-all-margin mt-4 mt-lg-6">{{ section.settings.banner12_text }}</div>
              {% endif %}
            </div>
        
            <div class="as-banner12-product-desktop-image banner12-product-desktop-image">
              <picture >
                {% if section.settings.banner12_product_mob_image != blank %}
                  <source media="(max-width: 767px)" sizes="(max-width: 767px) 100vw, 767px"
                    srcset="{{ section.settings.banner12_product_mob_image | img_url: '375x' }} 1x,
                    {{ section.settings.banner12_product_mob_image | img_url: '375x', scale: 2 }} 2x,
                    {{ section.settings.banner12_product_mob_image | img_url: '375x', scale: 3 }} 3x">
                {% endif %}
                {% if section.settings.banner12_product_desktop_image != blank %}
                  <img class="h-100 object-fit-cover w-100 w-lg-auto"
                    srcset="{%- if section.settings.banner12_product_desktop_image.width >= 1200 -%}{{ section.settings.banner12_product_desktop_image | img_url: '1200x' }} 1200w,{%- endif -%}
                      {%- if section.settings.banner12_product_desktop_image.width >= 1920 -%}{{ section.settings.banner12_product_desktop_image | img_url: '1920x' }} 1920w,{%- endif -%}
                      {%- if section.settings.banner12_product_desktop_image.width >= 2400 -%}{{ section.settings.banner12_product_desktop_image | img_url: '2400x' }} 2400w,{%- endif -%}
                      {%- if section.settings.banner12_product_desktop_image.width >= 3840 -%}{{ section.settings.banner12_product_desktop_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                    src="{{ section.settings.banner12_product_desktop_image | img_url: '750x' }}"
                    loading="lazy"
                    alt="{{ section.settings.banner12_product_desktop_image.alt | escape }}" >
                {% elsif section.settings.banner12_product_mob_image != blank %}
                    <img class="h-100 object-fit-cover 22"
                    srcset="{%- if section.settings.banner12_product_mob_image.width >= 414 -%}{{ section.settings.banner12_product_mob_image | img_url: '414x' }} 414w,{%- endif -%}
                      {%- if section.settings.banner12_product_mob_image.width >= 600 -%}{{ section.settings.banner12_product_mob_image | img_url: '600x' }} 600w,{%- endif -%}
                      {%- if section.settings.banner12_product_mob_image.width >= 828 -%}{{ section.settings.banner12_product_mob_image | img_url: '828x' }} 828w,{%- endif -%}
                      {%- if section.settings.banner12_product_mob_image.width >= 1000 -%}{{ section.settings.banner12_product_mob_image | img_url: '1000x' }} 1000w,{%- endif -%}
                      {%- if section.settings.banner12_product_mob_image.width >= 1200 -%}{{ section.settings.banner12_product_mob_image | img_url: '1780x' }} 1200w,{%- endif -%}
                      {%- if section.settings.banner12_product_mob_image.width >= 2400 -%}{{ section.settings.banner12_product_mob_image | img_url: '2000x' }} 2400w,{%- endif -%}
                      {%- if section.settings.banner12_product_mob_image.width >= 3840 -%}{{ section.settings.banner12_product_mob_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                      src="{{ section.settings.banner12_product_mob_image | img_url: '750x' }}"
                      loading="lazy"
                      alt="{{ section.settings.banner12_product_mob_image.alt | escape }}" >
                {% endif %}
              </picture>
            </div>
          </div>
        </div>
      </div>
      
      <div class="as-rokid-max-banner13-wrap rokid-max-banner13-wrap flex-shrink-0">
        <div class="rokid-max-banner13 position-relative h-100">
          <div class="as-banner13-mobile-text-content-trigger"></div>

          <div class="vw-100 start-0">
            <div class="d-flex justify-content-center">
              <div class="location as-location">
              </div>
            </div>
          </div>
          <div class="banner13-sticky-content position-sticky start-0 pt-lg-9">
            <div class="d-lg-inline-flex image-content as-image-content">
              <div class="banner13-image-warp me-lg-7">
                <div class="d-block d-lg-none mb-6 banner-content-wrap">
                  <div class="position-relative as-banner-title-wrap banner-title-wrap">
                    {% if section.settings.banner13_title != blank %}
                      <h2 class="banner-title no-all-margin">{{ section.settings.banner13_title }}</h2>
                      <h2 class="banner13-hidden-title no-all-margin">{{ section.settings.banner13_title }}</h2>
                    {% endif %}
                  </div>

                  <div class="banner-text-wrap mt-4">
                    {% if section.settings.banner13_text != blank %}
                      <div class="mb-5">{{ section.settings.banner13_text | replace: '<p', '<p class="mb-0 text"' }}</div>
                    {% endif %}
                    {% if section.settings.button_13_label != blank %}
                      <a {% render 'link', link: section.settings.button_13_link %} class="btn-link link-primary {% unless section.settings.button_13_link %}disabled{% endunless %}" href="{{ section.settings.button_13_link }}">{{ section.settings.button_13_label }}</a>
                    {% endif %}
                  </div>
                </div>
                    
                <picture class="picture-ratio">
                  {% if section.settings.banner13_product_mob_image != blank %}
                    <source media="(max-width: 767px)" sizes="(max-width: 767px) 100vw, 767px"
                      srcset="{{ section.settings.banner13_product_mob_image | img_url: '375x' }} 1x,
                      {{ section.settings.banner13_product_mob_image | img_url: '375x', scale: 2 }} 2x,
                      {{ section.settings.banner13_product_mob_image | img_url: '375x', scale: 3 }} 3x">
                  {% endif %}
                  {% if section.settings.banner13_product_desktop_image != blank %}
                    <img class="h-100 object-fit-cover w-100 banner-image"
                      srcset="{%- if section.settings.banner13_product_desktop_image.width >= 1200 -%}{{ section.settings.banner13_product_desktop_image | img_url: '1200x' }} 1200w,{%- endif -%}
                        {%- if section.settings.banner13_product_desktop_image.width >= 1920 -%}{{ section.settings.banner13_product_desktop_image | img_url: '1920x' }} 1920w,{%- endif -%}
                        {%- if section.settings.banner13_product_desktop_image.width >= 2400 -%}{{ section.settings.banner13_product_desktop_image | img_url: '2400x' }} 2400w,{%- endif -%}
                        {%- if section.settings.banner13_product_desktop_image.width >= 3840 -%}{{ section.settings.banner13_product_desktop_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                      src="{{ section.settings.banner13_product_desktop_image | img_url: '750x' }}"
                      loading="lazy"
                      alt="{{ section.settings.banner13_product_desktop_image.alt | escape }}" >
                  {% elsif section.settings.banner13_product_mob_image != blank %}
                      <img class="h-100 object-fit-cover banner-image"
                      srcset="{%- if section.settings.banner13_product_mob_image.width >= 414 -%}{{ section.settings.banner13_product_mob_image | img_url: '414x' }} 414w,{%- endif -%}
                        {%- if section.settings.banner13_product_mob_image.width >= 600 -%}{{ section.settings.banner13_product_mob_image | img_url: '600x' }} 600w,{%- endif -%}
                        {%- if section.settings.banner13_product_mob_image.width >= 828 -%}{{ section.settings.banner13_product_mob_image | img_url: '828x' }} 828w,{%- endif -%}
                        {%- if section.settings.banner13_product_mob_image.width >= 1000 -%}{{ section.settings.banner13_product_mob_image | img_url: '1000x' }} 1000w,{%- endif -%}
                        {%- if section.settings.banner13_product_mob_image.width >= 1200 -%}{{ section.settings.banner13_product_mob_image | img_url: '1780x' }} 1200w,{%- endif -%}
                        {%- if section.settings.banner13_product_mob_image.width >= 2400 -%}{{ section.settings.banner13_product_mob_image | img_url: '2000x' }} 2400w,{%- endif -%}
                        {%- if section.settings.banner13_product_mob_image.width >= 3840 -%}{{ section.settings.banner13_product_mob_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                        src="{{ section.settings.banner13_product_mob_image | img_url: '750x' }}"
                        loading="lazy"
                        alt="{{ section.settings.banner13_product_mob_image.alt | escape }}" >
                  {% endif %}
                </picture>
              </div>

              <div class="banner13-image-warp me-lg-7">
                <div class="d-block d-lg-none mt-7 mb-6 banner-content-wrap">
                  <div class="position-relative as-banner-title-wrap banner-title-wrap">
                    {% if section.settings.banner14_title != blank %}
                      <h2 class="banner-title no-all-margin">{{ section.settings.banner14_title }}</h2>
                      <h2 class="banner13-hidden-title no-all-margin">{{ section.settings.banner14_title }}</h2>
                    {% endif %}
                  </div>

                  <div class="banner-text-wrap mt-4">
                    {% if section.settings.banner14_text != blank %}
                      <div class="mb-5">{{ section.settings.banner14_text | replace: '<p', '<p class="mb-0 text"' }}</div>
                    {% endif %}
                    {% if section.settings.button_14_label != blank %}
                      <a {% render 'link', link: section.settings.button_14_link %} class="btn-link link-primary {% unless section.settings.button_14_link  %}disabled{% endunless %}" href="{{ section.settings.button_14_link }}">{{ section.settings.button_14_label }}</a>
                    {% endif %}
                  </div>
                </div>

                <picture class="picture-ratio">
                  {% if section.settings.banner14_product_mob_image != blank %}
                    <source media="(max-width: 767px)" sizes="(max-width: 767px) 100vw, 767px"
                      srcset="{{ section.settings.banner14_product_mob_image | img_url: '375x' }} 1x,
                      {{ section.settings.banner14_product_mob_image | img_url: '375x', scale: 2 }} 2x,
                      {{ section.settings.banner14_product_mob_image | img_url: '375x', scale: 3 }} 3x">
                  {% endif %}
                  {% if section.settings.banner14_product_desktop_image != blank %}
                    <img class="h-100 object-fit-cover w-100 banner-image"
                      srcset="{%- if section.settings.banner14_product_desktop_image.width >= 1200 -%}{{ section.settings.banner14_product_desktop_image | img_url: '1200x' }} 1200w,{%- endif -%}
                        {%- if section.settings.banner14_product_desktop_image.width >= 1920 -%}{{ section.settings.banner14_product_desktop_image | img_url: '1920x' }} 1920w,{%- endif -%}
                        {%- if section.settings.banner14_product_desktop_image.width >= 2400 -%}{{ section.settings.banner14_product_desktop_image | img_url: '2400x' }} 2400w,{%- endif -%}
                        {%- if section.settings.banner14_product_desktop_image.width >= 3840 -%}{{ section.settings.banner14_product_desktop_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                      src="{{ section.settings.banner14_product_desktop_image | img_url: '750x' }}"
                      loading="lazy"
                      alt="{{ section.settings.banner14_product_desktop_image.alt | escape }}" >
                  {% elsif section.settings.banner14_product_mob_image != blank %}
                      <img class="h-100 object-fit-cover banner-image"
                      srcset="{%- if section.settings.banner14_product_mob_image.width >= 414 -%}{{ section.settings.banner14_product_mob_image | img_url: '414x' }} 414w,{%- endif -%}
                        {%- if section.settings.banner14_product_mob_image.width >= 600 -%}{{ section.settings.banner14_product_mob_image | img_url: '600x' }} 600w,{%- endif -%}
                        {%- if section.settings.banner14_product_mob_image.width >= 828 -%}{{ section.settings.banner14_product_mob_image | img_url: '828x' }} 828w,{%- endif -%}
                        {%- if section.settings.banner14_product_mob_image.width >= 1000 -%}{{ section.settings.banner14_product_mob_image | img_url: '1000x' }} 1000w,{%- endif -%}
                        {%- if section.settings.banner14_product_mob_image.width >= 1200 -%}{{ section.settings.banner14_product_mob_image | img_url: '1780x' }} 1200w,{%- endif -%}
                        {%- if section.settings.banner14_product_mob_image.width >= 2400 -%}{{ section.settings.banner14_product_mob_image | img_url: '2000x' }} 2400w,{%- endif -%}
                        {%- if section.settings.banner14_product_mob_image.width >= 3840 -%}{{ section.settings.banner14_product_mob_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                        src="{{ section.settings.banner14_product_mob_image | img_url: '750x' }}"
                        loading="lazy"
                        alt="{{ section.settings.banner14_product_mob_image.alt | escape }}" >
                  {% endif %}
                </picture>
              </div>

              <div class="banner13-image-warp as-last-banner13-image-warp">
                <div class="d-block d-lg-none mt-7 mb-6 banner-content-wrap">
                  <div class="position-relative as-banner-title-wrap banner-title-wrap">
                    {% if section.settings.banner15_title != blank %}
                      <h2 class="banner-title no-all-margin">{{ section.settings.banner15_title }}</h2>
                      <h2 class="banner13-hidden-title no-all-margin">{{ section.settings.banner15_title }}</h2>
                    {% endif %}
                  </div>

                  <div class="banner-text-wrap mt-4">
                    {% if section.settings.banner15_text != blank %}
                      <div class="mb-5">{{ section.settings.banner15_text | replace: '<p', '<p class="mb-0 text"' }}</div>
                    {% endif %}
                    {% if section.settings.button_15_label != blank %}
                      <a {% render 'link', link: section.settings.button_15_link %} class="btn-link link-primary {% unless section.settings.button_15_link  %}disabled{% endunless %}" href="{{ section.settings.button_15_link }}">{{ section.settings.button_15_label }}</a>
                    {% endif %}
                  </div>
                </div>

                <picture class="picture-ratio">
                  {% if section.settings.banner15_product_mob_image != blank %}
                    <source media="(max-width: 767px)" sizes="(max-width: 767px) 100vw, 767px"
                      srcset="{{ section.settings.banner15_product_mob_image | img_url: '375x' }} 1x,
                      {{ section.settings.banner15_product_mob_image | img_url: '375x', scale: 2 }} 2x,
                      {{ section.settings.banner15_product_mob_image | img_url: '375x', scale: 3 }} 3x">
                  {% endif %}
                  {% if section.settings.banner15_product_desktop_image != blank %}
                    <img class="h-100 object-fit-cover w-100 banner-image"
                      srcset="{%- if section.settings.banner15_product_desktop_image.width >= 1200 -%}{{ section.settings.banner15_product_desktop_image | img_url: '1200x' }} 1200w,{%- endif -%}
                        {%- if section.settings.banner15_product_desktop_image.width >= 1920 -%}{{ section.settings.banner15_product_desktop_image | img_url: '1920x' }} 1920w,{%- endif -%}
                        {%- if section.settings.banner15_product_desktop_image.width >= 2400 -%}{{ section.settings.banner15_product_desktop_image | img_url: '2400x' }} 2400w,{%- endif -%}
                        {%- if section.settings.banner15_product_desktop_image.width >= 3840 -%}{{ section.settings.banner15_product_desktop_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                      src="{{ section.settings.banner15_product_desktop_image | img_url: '750x' }}"
                      loading="lazy"
                      alt="{{ section.settings.banner15_product_desktop_image.alt | escape }}" >
                  {% elsif section.settings.banner15_product_mob_image != blank %}
                      <img class="h-100 object-fit-cover banner-image"
                      srcset="{%- if section.settings.banner15_product_mob_image.width >= 414 -%}{{ section.settings.banner15_product_mob_image | img_url: '414x' }} 414w,{%- endif -%}
                        {%- if section.settings.banner15_product_mob_image.width >= 600 -%}{{ section.settings.banner15_product_mob_image | img_url: '600x' }} 600w,{%- endif -%}
                        {%- if section.settings.banner15_product_mob_image.width >= 828 -%}{{ section.settings.banner15_product_mob_image | img_url: '828x' }} 828w,{%- endif -%}
                        {%- if section.settings.banner15_product_mob_image.width >= 1000 -%}{{ section.settings.banner15_product_mob_image | img_url: '1000x' }} 1000w,{%- endif -%}
                        {%- if section.settings.banner15_product_mob_image.width >= 1200 -%}{{ section.settings.banner15_product_mob_image | img_url: '1780x' }} 1200w,{%- endif -%}
                        {%- if section.settings.banner15_product_mob_image.width >= 2400 -%}{{ section.settings.banner15_product_mob_image | img_url: '2000x' }} 2400w,{%- endif -%}
                        {%- if section.settings.banner15_product_mob_image.width >= 3840 -%}{{ section.settings.banner15_product_mob_image | img_url: '3840x' }} 3840w,{%- endif -%}"
                        src="{{ section.settings.banner15_product_mob_image | img_url: '750x' }}"
                        loading="lazy"
                        alt="{{ section.settings.banner15_product_mob_image.alt | escape }}" >
                  {% endif %}
                </picture>
              </div>
            </div>

            <div class="mt-5 position-sticky start-0 as-sticky-text-content sticky-text-content d-none d-lg-flex justify-content-center">
              <div class="row text-content as-text-content  justify-content-center flex-nowrap active">
                <div class="banner-title-wrap col-6">
                  {% if section.settings.banner13_title != blank %}
                    <h2 class="banner-title no-all-margin h-100">{{ section.settings.banner13_title }}</h2>
                  {% endif %}
                </div>
                <div class="banner-text-wrap col-6">
                  {% if section.settings.banner13_text != blank %}
                    <div class="mb-4">{{ section.settings.banner13_text | replace: '<p', '<p class="mb-0 text"' }}</div>
                  {% endif %}
                  {% if section.settings.button_13_label != blank %}
                    <a {% render 'link', link: section.settings.button_13_link %} class="btn-link link-primary {% unless section.settings.button_13_link %}disabled{% endunless %}" href="{{ section.settings.button_13_link }}">{{ section.settings.button_13_label }}</a>
                  {% endif %}
                </div>
              </div>

              <div class="row text-content as-text-content  justify-content-center flex-nowrap">
                <div class="banner-title-wrap col-6">
                  {% if section.settings.banner14_title != blank %}
                    <h2 class="banner-title no-all-margin h-100">{{ section.settings.banner14_title }}</h2>
                  {% endif %}
                </div>
                <div class="banner-text-wrap col-6">
                  {% if section.settings.banner14_text != blank %}
                    <div class="mb-4">{{ section.settings.banner14_text | replace: '<p', '<p class="mb-0 text"' }}</div>
                  {% endif %}
                  {% if section.settings.button_14_label != blank %}
                    <a {% render 'link', link: section.settings.button_14_link %} class="btn-link link-primary {% unless section.settings.button_14_link  %}disabled{% endunless %}" href="{{ section.settings.button_14_link }}">{{ section.settings.button_14_label }}</a>
                  {% endif %}
                </div>
              </div>

              <div class="row text-content as-text-content  justify-content-center flex-nowrap">
                <div class="banner-title-wrap col-6">
                  {% if section.settings.banner15_title != blank %}
                    <h2 class="banner-title no-all-margin h-100">{{ section.settings.banner15_title }}</h2>
                  {% endif %}
                </div>
                <div class="banner-text-wrap col-6">
                  {% if section.settings.banner15_text != blank %}
                    <div class="mb-4">{{ section.settings.banner15_text | replace: '<p', '<p class="mb-0 text"' }}</div>
                  {% endif %}
                  {% if section.settings.button_15_label != blank %}
                    <a {% render 'link', link: section.settings.button_15_link %} class="btn-link link-primary {% unless section.settings.button_15_link  %}disabled{% endunless %}" href="{{ section.settings.button_15_link }}">{{ section.settings.button_15_label }}</a>
                  {% endif %}
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</div>

<div class="modal fade as-rokid-max-video-modal" id="video-modal" tabindex="-1" aria-labelledby="video-modalLabel" bis_skin_checked="1" style="display: none;" aria-hidden="true">
  <div class="modal-dialog modal-fullscreen" bis_skin_checked="1">
    <div class="modal-content" bis_skin_checked="1">
      <button type="button" class="btn p-0 as-close btn-close btn-modal-close icon-wrap-md" data-bs-dismiss="modal" aria-label="Close">
        {% render 'icon-close-circle' %}
      </button>

      <div class="modal-body p-0">
          <div class="modal-inner-content d-flex h-100 justify-content-center">
            <div class="my-auto cursor-pointer">
              <video class="as-banner2-product-full-video w-100 object-fit-cover" type="mp4" muted controls playsinline webkit-playsinline data-video="{{ section.settings.banner2_full_product_desktop_video }}?t=0.2"></video>
              {% comment %} <video class="as-banner2-product-full-mobile-video w-100 object-fit-cover d-lg-none" type="mp4" muted controls playsinline webkit-playsinline src="{{ section.settings.banner2_full_product_mobile_video }}"></video> {% endcomment %}
            </div>
          </div>
        </div>
    </div>
  </div>
</div>

<script src="{{ 'rokid-max-page.min.js' | asset_url }}" defer="defer"></script>
{% schema %}
  {
    "name": "Rokid max", 
    "tag": "section",
    "settings": [
      {
        "type": "header",
        "content": "Banner1"
      },
      {
        "type": "image_picker",
        "id": "banner1_desktop_text_image",
        "label": "Desktop text image"
      },
      {
        "type": "image_picker",
        "id": "banner1_mobile_text_image",
        "label": "Mobile text image"
      },
      {
        "type": "image_picker",
        "id": "banner1_product_desktop_image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "banner1_product_mobile_image",
        "label": "Mobile image"
      },
      {
        "type": "header",
        "content": "Banner2"
      },
      {
        "type": "richtext",
        "id": "banner2_title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "banner2_text",
        "label": "Text"
      },
      {
        "type": "richtext",
        "id": "banner2_text2",
        "label": "Text",
        "default": "<p>Watch the Film</p>"
      },
      {
        "type": "image_picker",
        "id": "banner2_product_desktop_image",
        "label": "Image"
      },
      {
        "type": "image_picker",
        "id": "banner2_shadow_image2",
        "label": "Shadow Image2"
      },
      {
        "type": "url",
        "id": "banner2_product_desktop_video",
        "label": "Desktop video link"
      },
      {
        "type": "url",
        "id": "banner2_product_mobile_video",
        "label": "Mobile video link"
      },
      {
        "type": "url",
        "id": "banner2_full_product_desktop_video",
        "label": "Full video link"
      },
      {
        "type": "header",
        "content": "Banner3"
      },
      {
        "type": "richtext",
        "id": "banner3_title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "banner3_text",
        "label": "Text"
      },
      {
        "type": "image_picker",
        "id": "banner3_product_desktop_image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "banner3_product_mobile_image",
        "label": "Mobile image"
      },
      {
        "type": "image_picker",
        "id": "banner3_desktop_eyeglasses_image",
        "label": "Desktop eyeglasses image"
      },
      {
        "type": "image_picker",
        "id": "banner3_mobile_eyeglasses_image",
        "label": "Mobile eyeglasses-image"
      },
      {
        "type": "image_picker",
        "id": "banner3_desktop_virtual_image_a",
        "label": "Desktop virtual image a"
      },
      {
        "type": "image_picker",
        "id": "banner3_mobile_virtual_image_a",
        "label": "Mobile virtual image a"
      },
      {
        "type": "image_picker",
        "id": "banner3_desktop_virtual_image_b",
        "label": "Desktop virtual image b"
      },
      {
        "type": "image_picker",
        "id": "banner3_mobile_virtual_image_b",
        "label": "Mobile virtual image b"
      },
      {
        "type": "image_picker",
        "id": "banner3_desktop_star",
        "label": "Desktop star image"
      },
      {
        "type": "image_picker",
        "id": "banner3_mobile_star",
        "label": "Mobile star image"
      },
      {
        "type": "image_picker",
        "id": "banner3_desktop_footer_shadow",
        "label": "Desktop footer shadow"
      },
      {
        "type": "image_picker",
        "id": "banner3_mobile_footer_shadow",
        "label": "Mobile footer shadow"
      },
      {
        "type": "header",
        "content": "Banner4"
      },
      {
        "type": "header",
        "content": "Banner5"
      },
      {
        "type": "richtext",
        "id": "banner5_title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "banner5_text",
        "label": "Text"
      },
      {
        "type": "richtext",
        "id": "banner5_up_to",
        "label": "Text"
      },
      {
        "type": "richtext",
        "id": "banner5_nits",
        "label": "Text"
      },
      {
        "type": "image_picker",
        "id": "banner5_product_desktop_image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "banner5_product_mobile_image",
        "label": "Mobile image"
      },
      {
        "type": "header",
        "content": "Banner6"
      },
      {
        "type": "richtext",
        "id": "banner6_title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "banner6_text",
        "label": "Text"
      },
      {
        "type": "image_picker",
        "id": "banner6_product_desktop_image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "banner6_product_mobile_image",
        "label": "Mobile image"
      },
      {
        "type": "header",
        "content": "Banner7"
      },
      {
        "type": "richtext",
        "id": "banner7_title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "banner7_text",
        "label": "Text"
      },
      {
        "type": "richtext",
        "id": "banner7_75g",
        "label": "75G"
      },
      {
        "type": "image_picker",
        "id": "banner7_product_desktop_image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "banner7_product_mobile_image",
        "label": "Mobile image"
      },
      {
        "type": "image_picker",
        "id": "banner7_desktop_background_image",
        "label": "Desktop background image"
      },
      {
        "type": "image_picker",
        "id": "banner7_mobile_background_image",
        "label": "Mobile background image"
      },
      {
        "type": "header",
        "content": "Banner8"
      },
      {
        "type": "richtext",
        "id": "banner8_title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "banner8_text",
        "label": "Text"
      },
      {
        "type": "url",
        "id": "banner8_product_desktop_video",
        "label": "Desktop video link"
      },
      {
        "type": "url",
        "id": "banner8_product_mobile_video",
        "label": "Mobile video link"
      },
      {
        "type": "header",
        "content": "Banner9"
      },
      {
        "type": "richtext",
        "id": "banner9_title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "banner9_text",
        "label": "Text"
      },
      {
        "type": "image_picker",
        "id": "banner9_icon_image",
        "label": "Icon image"
      },
      {
        "type": "image_picker",
        "id": "banner9_product_desktop_image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "banner9_product_mobile_image",
        "label": "Mobile image"
      },
      {
        "type": "header",
        "content": "Banner10"
      },
      {
        "type": "richtext",
        "id": "banner10_title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "banner10_text",
        "label": "Text"
      },
      {
        "type": "richtext",
        "id": "banner10_text2",
        "label": "Text"
      },
      {
        "type": "richtext",
        "id": "banner10_text3",
        "label": "Text"
      },
      {
        "type": "richtext",
        "id": "banner10_second_title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "banner10_second_text",
        "label": "Text"
      },
      {
        "type": "image_picker",
        "id": "banner10_desktop_background_image",
        "label": "Desktop background image"
      },
      {
        "type": "image_picker",
        "id": "banner10_mobile_background_image",
        "label": "Mobile background image"
      },
      {
        "type": "image_picker",
        "id": "banner10_product_desktop_image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "banner10_product_mobile_image",
        "label": "Mobile image"
      },
      {
        "type": "image_picker",
        "id": "banner10_desktop_shadow_image",
        "label": "Desktop shadow image"
      },
      {
        "type": "image_picker",
        "id": "banner10_mobile_shadow_image",
        "label": "Mobile shadow image"
      },
      {
        "type": "image_picker",
        "id": "banner10_desktop_lenses_image",
        "label": "Desktop lenses image"
      },
      {
        "type": "image_picker",
        "id": "banner10_mobile_lenses_image",
        "label": "Mobile lenses image"
      },
      {
        "type": "header",
        "content": "Banner12"
      },
      {
        "type": "richtext",
        "id": "banner12_title",
        "label": "Title"
      },
      {
        "type": "text",
        "id": "secondary12_title",
        "label": "Secondary Title"
      },
      {
        "type": "richtext",
        "id": "banner12_text",
        "label": "Text"
      },
      {
        "type": "image_picker",
        "id": "banner12_product_desktop_image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "banner12_product_mob_image",
        "label": "Mobile image"
      },
      {
        "type": "header",
        "content": "Banner13"
      },
      {
        "type": "image_picker",
        "id": "banner13_product_desktop_image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "banner13_product_mob_image",
        "label": "Mobile image"
      },
      {
        "type": "richtext",
        "id": "banner13_title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "banner13_text",
        "label": "Text"
      },
      {
        "type": "text",
        "id": "button_13_label",
        "default": "Button label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_13_link",
        "label": "Button link"
      },
      {
        "type": "header",
        "content": "Banner14"
      },
      {
        "type": "image_picker",
        "id": "banner14_product_desktop_image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "banner14_product_mob_image",
        "label": "Mobile image"
      },
      {
        "type": "richtext",
        "id": "banner14_title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "banner14_text",
        "label": "Text"
      },
      {
        "type": "text",
        "id": "button_14_label",
        "default": "Button label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_14_link",
        "label": "Button link"
      },
      {
        "type": "header",
        "content": "Banner15"
      },
      {
        "type": "image_picker",
        "id": "banner15_product_desktop_image",
        "label": "Desktop image"
      },
      {
        "type": "image_picker",
        "id": "banner15_product_mob_image",
        "label": "Mobile image"
      },
      {
        "type": "richtext",
        "id": "banner15_title",
        "label": "Title"
      },
      {
        "type": "richtext",
        "id": "banner15_text",
        "label": "Text"
      },
      {
        "type": "text",
        "id": "button_15_label",
        "default": "Button label",
        "label": "Button label"
      },
      {
        "type": "url",
        "id": "button_15_link",
        "label": "Button link"
      }
    ]
  }
{% endschema %}
